<template>
  <div class="pagination">
    <!-- 当起始页为1的时候，禁用上一页按钮 -->
    <button :disabled="pageNo === 1" @click="$emit('newPageNo', pageNo - 1)">
      上一页
    </button>
    <!-- 当起始页等于2或者大于2的时候将默认的第一页隐藏，因为会有连续页生成所以不用担心没有第一页 -->
    <button
      v-show="startEndPage.start >= 2"
      :class="{ active: pageNo === 1 }"
      @click="$emit('newPageNo', 1)"
    >
      1
    </button>
    <!-- 当起始页大于2的时候则需要将省略号显示出来了，所以起始页大于二就将其显示 -->
    <button v-show="startEndPage.start > 2">···</button>
    <!-- 通过计算属性生成一个起始页到结束页的页码组成的数组，然后遍历生成连续页 -->
    <button
      v-for="page in continuePageArr"
      :key="page"
      :class="{ active: pageNo === page }"
      @click="$emit('newPageNo', page)"
    >
      {{ page }}
    </button>
    <!-- 当结束页小于最后第二页的时候，应该将省略号显示，其他时候隐藏 -->
    <button v-show="startEndPage.end < totalPages - 1">···</button>
    <!-- 当结束页小于最后一页的的时候将其显示，其他情况将其隐藏 -->
    <button
      v-show="startEndPage.end < totalPages"
      :class="{ active: pageNo === totalPages }"
      @click="$emit('newPageNo', totalPages)"
    >
      {{ totalPages }}
    </button>
    <!-- 当结束页等于最后一页的时候禁用下一页按钮 -->
    <button
      :disabled="pageNo === totalPages"
      @click="$emit('newPageNo', pageNo + 1)"
    >
      下一页
    </button>
    <button style="margin-left: 30px">共 {{ total }} 条数据</button>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["totalPages", "pageNo", "continuePage", "total"],
  computed: {
    /**@startEndPage 根据当前页计算起始页与结束页*/
    startEndPage() {
      /**@totalPages 将页码总数
       * @pageNo 当前页
       * @continuePage 连续页的个数拿到*/
      const { totalPages, pageNo, continuePage } = this;
      //创建一个起始页，一个结束页
      let start = 0,
        end = 0;
      //判断总页数和连续页的多少比较
      if (totalPages < continuePage) {
        //如果总页数小于连续页
        start = 1;
        end = totalPages;
      } else {
        //如果总页数大于连续页
        start = pageNo - Math.floor(continuePage / 2);
        end = pageNo + Math.floor(continuePage / 2);
        //如果通过计算得到起始页为0，则直接赋值1，结束页为连续页
        if (start < 1) {
          start = 1;
          end = continuePage;
        }
        //如果通过计算结束页超过了总页数，那么将总页数作为结束页
        if (end > totalPages) {
          end = totalPages;
          //起始页的计算通过总页数减去连续页的个数加1
          start = totalPages - continuePage + 1;
        }
      }
      return { start, end };
    },
    /**@continuePageArr 根据起始页结束页也生产数组 */
    continuePageArr() {
      //因为要生成连续页码，所以需要生成一个当前连续页的数组
      const arr = [];
      //i为起始页，循环终止条件为结束页，也就是说遍历会生成一个当前连续页的数组
      for (let i = this.startEndPage.start; i <= this.startEndPage.end; i++) {
        arr.push(i);
      }
      //将这个数租返回用于遍历生成按钮
      return arr;
    },
  },
  mounted() {
    // setTimeout(() => {
    //   console.log(this.totalPages);
    //   console.log(this.continuePageArr);
    // }, 2000);
  },
};
</script>

<style lang="less" scoped>
.pagination {
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: pointer;
      background-color: #409eff;
      color: #fff;
    }
  }
}
</style>
